<template>
    <header v-color="{isColor}">
        <div class="logo">
            <img src="@/img/LOGO.png" alt="网易云音乐,倾听你的梦">
        </div>
        <div class="search">
            <i class="fa fa-search"></i>
            <input type="text">
        </div>
        <div class="right">
            <div class="my">
                <span class="userAva">
                    <i class="fa fa-user-circle-o" id="faUser"  @click="Login"></i>
                    <router-link :to="{name:'MyInfo'}"><img :src="userAva"></router-link>
                </span>
                <a>{{userName}}</a>
            </div>
            <div class="user">
                <span>
                    <i class="fa fa-refresh" @click="changeColor"></i>
                </span>
                <span>
                    <i class="fa fa-envelope"></i>
                </span>
                <span>
                    <i @click="setting" class="fa fa-cog"></i>
                </span>
            </div>
        </div>
        <div class="loginWindow" v-if="show">
            <form action="">
                <i @click="Login" class="fa fa-close"></i>
                <ul>
                    <li @click="checkT">手机登录</li>
                    <li @click="checkF">二维码登录</li>
                </ul>
                <div>
                    <Phone @userName="getUserName" @userAva="getUserAva" @close="getN" v-if="checked"></Phone>
                    <QRcode v-if="!checked"></QRcode>
                </div>
            </form>
        </div>
        <div class="setting" v-if="set">
            <ul>
                <router-link tag="li" :to="{name:'About'}">关于项目</router-link>
                <li @click="logout">退出登录</li>
            </ul>
        </div>
    </header>
</template>

<script>
import '@/style/font-awesome.min.css'
import TopHeader from './TopHeader.js'
import Phone from '../com/Login/Phone/Phone.vue'
import QRcode from '../com/Login/QRcode/QRcode.vue'
export default {
    name: "TopHeader",
    components:{
        Phone,
        QRcode
    },
    mixins:[TopHeader]
}
</script>

<style lang="scss" scoped>
@import './TopHeader.scss'
</style>
